<template>
    <view class="content">
        <view class="nav">
            <view class="name">
                <img src="/static/icon/坐标.png" alt="">
                <text>杭州市梦想小镇</text>
            </view>

            <!--
            <view class="ldang">
                <img src="/static/icon/坐标.png" alt="">
            </view>-->
            
            <view class="search">
                <input type="text" placeholder="永辉超市优惠商品" >
            </view>
        </view>
        <view class="tupian">
            <image class="tu" src="/static/imgs/assets/02.jpg"></image>
        </view>
        <view class="sort">
            <view class="sort-left">
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/super.png"></image>
                    <view>超市便利</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/market.png"></image>
                    <view>菜市场</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/fruits.png"></image>
                    <view>水果店</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/flower.png"></image>
                    <view>鲜花绿植</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/drug.png"></image>
                    <view>医药健康</view>
                </view>
            </view>
            <view class="sort-right">
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/home.png"></image>
                    <view>家居时尚</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/cake.png"></image>
                    <view>烘焙蛋糕</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/sign.png"></image>
                    <view>签到</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/prestige.png"></image>
                    <view>大牌免运</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/red.png"></image>
                    <view>红包套餐</view>
                </view>
            </view>
        </view>
        <view class="shop">
            <view class="shop-header">
                <view>附近店铺</view>
                <view @click="moreclick">查看更多</view>
            </view>
            <view v-for="item in shops" :key="item.id" @click="shopclick(item._id)">
                <view class="shop-card">
                    <image class="logoimg" :src="`/static/${item.imgUrl}`"></image>
                    <view class="shop-info">
                        <view class="shop-name">{{item.name}}</view>
                        <view class="shop-data">
                            月售: {{item.sales}} 起送: {{item.expressLimit}} 基础运费: {{item.expressPrice}}
                        </view>
                        <view class="shop-slogan" style="color: red;">{{item.slogan}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import config from '@/config'
    export default {
        data() {
            return {
                shops:[]
            }
        },
        onLoad() {
            this.show();
        },
        methods: {
            show() {
                uni.request({
                    url: config.API+"/hotList",
                    success: (res) => {
                        this.shops = res.data;
                    },
                    fail: (err) => {
                        console.error("数据请求失败", err);
                    }
                });
            },
            //点击商铺跳转
            shopclick(id) {
                console.log(id)
                uni.navigateTo({
                    url:`/pages/detail/detail?id=${id}`,
                });
            },
            //查看更多
            moreclick(){
                uni.navigateTo({
                    url:'/pages/index/more',
                });
            } 
        }
    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .name img{
        width:30px;
        height:30px;
        margin-left: 5px;
        margin-right: 5px;
    }
    .content {
        background-color: #f0f0f0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .nav{
        background-color: rgb(68, 159, 233);
        width: 100%;
        height: 180rpx;
        display: flex;
        flex-direction: column; 
        align-items: flex-start; 
    }
    .tupian{
        width: 100%;
        height: 200rpx;
    }
    .search{
        padding-left: 15px;
        height: 60rpx; 
        display: flex;
        align-items: center;
    }
    .search input {
        height: 100%;
    }
    .tupian image{
        width: 100%;
        height: 100%;
    }
    .sort{
        width: 100%;
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom, rgb(105, 160, 233), rgb(243, 244, 245));
        text-align: center;
    }
    .sort-left ,.sort-right{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .sortlist{
        width: 130rpx;
        margin: 12rpx;
    }
    .sortimg{
        width: 90rpx;
        height: 90rpx;
    }
    .name{
        font-size: 20px;
        color:azure;
        margin-left: 10px;
        margin-top: 10px;
    }
    .content .search{
        border: 1px solid aliceblue;
        border-radius: 2ch;
        width: 80%;
        background-color: aliceblue;
        margin-top: 10px;
        margin-left: 30px;
    }
    .shop {
        width: 90%;
        margin-top: 15rpx;
        background-color: white;
        box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        padding: 20rpx;
        border-radius: 10rpx;
    }
    .shop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 15rpx;
        font-size: 16px;
        border-bottom: 1px solid #eee;
        margin-bottom: 20rpx;
    }
    .shop-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #fff;
        border-radius: 10rpx;
        box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        padding: 15rpx;
        margin-bottom: 20rpx;
        transition: transform 0.2s ease;
    }
    .shop-card:hover {
        transform: translateY(-5rpx);
    }
    .logoimg {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
    }
    .shop-info {
        margin-left: 15rpx;
    }
    .shop-name {
        font-size: 18px;
        margin-bottom: 5rpx;
    }
    .shop-data {
        font-size: 14px;
        color: #666;
        margin-bottom: 3rpx;
    }
    .shop-slogan {
        font-size: 14px;
    }
    .nav {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
</style>    

